<div class="editor-row">

	<div ng-repeat="target in panel.targets"
		 class="grafana-target"
		 ng-class="{'grafana-target-hidden': target.hide}"
		 ng-controller="GraphiteTargetCtrl"
		 ng-init="init()">

		<div class="grafana-target-inner">
			<ul class="grafana-target-controls">
				<li ng-show="parserError">
					<a bs-tooltip="parserError" style="color: rgb(229, 189, 28)"
					   role="menuitem">
						<i class="icon icon-warning-sign"></i>
					</a>
				</li>
				<li>
					<a class="pointer" tabindex="1"
					   ng-click="showTextEditor = !showTextEditor">
						<i class="icon icon-pencil"></i>
					</a>
				</li>
				<li class="dropdown">
					<a class="pointer dropdown-toggle"
					   data-toggle="dropdown"
					   tabindex="1">
						<i class="icon icon-cog"></i>
					</a>
					<ul class="dropdown-menu pull-right" role="menu">
						<li role="menuitem">
							<a tabindex="1"
							   ng-click="duplicate()">
								Duplicate
							</a>
						</li>
						<li role="menuitem">
							<a tabindex="1"
							   ng-click="moveMetricQuery($index, $index-1)">
								Move up
							</a>
						</li>
						<li role="menuitem">
							<a tabindex="1"
							   ng-click="moveMetricQuery($index, $index+1)">
								Move down
							</a>
						</li>
					</ul>
				</li>
				<li>
					<a class="pointer" tabindex="1"
					   ng-click="removeDataQuery(target)">
						<i class="icon icon-remove"></i>
					</a>
				</li>
			</ul>

			<ul class="grafana-segment-list">
				<li class="grafana-target-segment"
					style="min-width: 15px; text-align: center">
					{{targetLetters[$index]}}
				</li>
				<li>
					<a class="grafana-target-segment"
					   ng-click="target.hide = !target.hide; get_data();"
					   role="menuitem">
						<i class="icon-eye-open"></i>
					</a>
				</li>
			</ul>

			<input type="text"
				   class="grafana-target-text-input span10"
				   ng-model="target.target"
				   focus-me="showTextEditor"
				   spellcheck='false'
				   ng-model-onblur ng-change="targetTextChanged()"
				   ng-show="showTextEditor"/>

			<ul class="grafana-segment-list" role="menu"
				ng-hide="showTextEditor">
				<li ng-repeat="segment in segments" role="menuitem"
					graphite-segment></li>
				<li ng-repeat="func in functions">
          <span graphite-func-editor
				class="grafana-target-segment grafana-target-function">
          </span>
				</li>
				<li class="dropdown" graphite-add-func>
				</li>
			</ul>
			<div class="clearfix"></div>
		</div>
	</div>

</div>

<section class="grafana-metric-options">
	<div class="grafana-target">
		<div class="grafana-target-inner">
			<ul class="grafana-segment-list">
				<li class="grafana-target-segment grafana-target-segment-icon">
					<i class="icon-wrench"></i>
				</li>
				<li class="grafana-target-segment">
					Cache timeout
				</li>
				<li>
					<input type="text"
						   class="input-mini grafana-target-segment-input"
						   ng-model="panel.cacheTimeout"
						   bs-tooltip="'Graphite parameter to override memcache default timeout (unit is seconds)'"
						   data-placement="right"
						   spellcheck='false'
						   placeholder="60">
				</li>
				<li class="grafana-target-segment">
					Max data points
				</li>
				<li>
					<input type="text"
						   class="input-mini grafana-target-segment-input"
						   ng-model="panel.maxDataPoints"
						   bs-tooltip="'Override max data points, automatically set to graph width in pixels.'"
						   data-placement="right"
						   ng-model-onblur ng-change="get_data()"
						   spellcheck='false'
						   placeholder="auto">
				</li>
			</ul>
			<div class="clearfix"></div>
		</div>
		<div class="grafana-target-inner">
			<ul class="grafana-segment-list">
				<li class="grafana-target-segment grafana-target-segment-icon">
					<i class="icon-info-sign"></i>
				</li>
				<li class="grafana-target-segment">
					<a ng-click="toggleEditorHelp(1);"
					   bs-tooltip="'click to show helpful info'"
					   data-placement="bottom">
						shorter legend names
					</a>
				</li>
				<li class="grafana-target-segment">
					<a ng-click="toggleEditorHelp(2);"
					   bs-tooltip="'click to show helpful info'"
					   data-placement="bottom">
						series as parameters
					</a>
				</li>
				<li class="grafana-target-segment">
					<a ng-click="toggleEditorHelp(3)"
					   bs-tooltip="'click to show helpful info'"
					   data-placement="bottom">
						stacking
					</a>
				</li>
				<li class="grafana-target-segment">
					<a ng-click="toggleEditorHelp(4)"
					   bs-tooltip="'click to show helpful info'"
					   data-placement="bottom">
						templating
					</a>
				</li>
				<li class="grafana-target-segment">
					<a ng-click="toggleEditorHelp(5)"
					   bs-tooltip="'click to show helpful info'"
					   data-placement="bottom">
						max data points
					</a>
				</li>
			</ul>
			<div class="clearfix"></div>
		</div>
	</div>
	</div>
</section>

<div class="editor-row">
	<div class="pull-left" style="margin-top: 30px;">

		<div class="grafana-info-box span8" ng-if="editorHelpIndex === 1">
			<h5>Shorter legend names</h5>
			<ul>
				<li>alias() function to specify a custom series name</li>
				<li>aliasByNode(2) to alias by a specific part of your metric
					path
				</li>
				<li>aliasByNode(2, -1) you can add multiple segment paths, and
					use negative index
				</li>
				<li>groupByNode(2, 'sum') is useful if you have 2 wildcards in
					your metric path and want to sumSeries and group by
				</li>
			</ul>
		</div>

		<div class="grafana-info-box span8" ng-if="editorHelpIndex === 2">
			<h5>Series as parameter</h5>
			<ul>
				<li>Some graphite functions allow you to have many series
					arguments
				</li>
				<li>Use #[A-Z] to use a graphite query as parameter to a
					function
				</li>
				<li>
					Examples:
					<ul>
						<li>asPercent(#A, #B)</li>
						<li>prod.srv-01.counters.count - asPercent(#A) :
							percentage of count in comparison with A query
						</li>
						<li>prod.srv-01.counters.count - sumSeries(#A) : sum
							count and series A
						</li>
						<li>divideSeries(#A, #B)</li>
					</ul>
				</li>
				<li>If a query is added only to be used as a parameter, hide it
					from the graph with the eye icon
				</li>
			</ul>
		</div>

		<div class="grafana-info-box span6" ng-if="editorHelpIndex === 3">
			<h5>Stacking</h5>
			<ul>
				<li>You find the stacking option under Display Styles tab</li>
				<li>When stacking is enabled make sure null point mode is set to
					'null as zero'
				</li>
			</ul>
		</div>

		<div class="grafana-info-box span6" ng-if="editorHelpIndex === 4">
			<h5>Templating</h5>
			<ul>
				<li>You can use a template variable in place of metric names
				</li>
				<li>You can use a template variable in place of function
					parameters
				</li>
				<li>You enable the templating feature in Dashboard settings /
					Feature toggles
				</li>
			</ul>
		</div>

		<div class="grafana-info-box span6" ng-if="editorHelpIndex === 5">
			<h5>Max data points</h5>
			<ul>
				<li>Every graphite request is issued with a maxDataPoints
					parameter
				</li>
				<li>Graphite uses this parameter to consolidate the real number
					of values down to this number
				</li>
				<li>If there are more real values, then by default they will be
					consolidated using averages
				</li>
				<li>This could hide real peaks and max values in your series
				</li>
				<li>You can change how point consolidation is made using the
					consolidateBy graphite function
				</li>
				<li>Point consolidation will effect series legend values
					(min,max,total,current)
				</li>
				<li>If you override maxDataPoint and set a high value
					performance can be severely effected
				</li>
			</ul>
		</div>

	</div>
</div>
